<template>
    <div class="header">
        <div class="personal">
            <el-badge :value="12" class="item" style="margin-right: 15px;">
                <el-icon>
                    <Bell />
                </el-icon>
            </el-badge>
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <el-dropdown @command="handleEvent">
                <span class="el-dropdown-link">
                    欢迎您,{{ username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/personal" icon="User">
                            个人中心
                        </el-dropdown-item>
                        <el-dropdown-item command="/logout" icon="SwitchButton">
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/auth';
import { useRouter } from 'vue-router';
const router = useRouter()
const UserStore = useUserStore()
const { username } = storeToRefs(UserStore)
const {clearData} = UserStore

// 下来菜单事件
const handleEvent = (command:string)=>{
    if(command==='/logout'){
        clearData()
        router.push('/')
    }else{
        router.push(command)
    }
}
</script>
<style lang="less" scoped>
.header {
    background-color: white;
    height: 60px;
    padding: 0 20px;

    .personal {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 60px;

        .item {
            margin-top: 10px;
        }
    }
}
</style>